<!DOCTYPE html>
<html>
<head>
    <title>配置信息页面</title>
    <link rel="stylesheet" th:href="@{/css/sidebar.css}" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/styles/default.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.7.2/highlight.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/js-yaml/4.1.0/js-yaml.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            display: flex; /* 使用 flex 布局 */
        }

        #content-container {
            flex: 1;
            margin-left: 20px;
        }

        table {
            border-collapse: collapse;
            width: 100%;
        }

        th, td {
            text-align: left;
            padding: 8px;
        }

        th {
            background-color: #f2f2f2;
        }

        button {
            padding: 5px 10px;
        }

        /* 样式表 */
        .popup-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .popup-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            background-color: #fff;
            padding: 20px;
            border-radius: 5px;
        }

        .popup-buttons {
            text-align: right;
            margin-top: 10px;
        }

        /* 修改编辑器样式 */
        .config-editor {
            white-space: pre-wrap;
            resize: vertical;
        }

        form {
            margin: 0 auto;
            padding: 20px;
            border: 1px solid #ccc;
            border-radius: 5px;
            background-color: #f7f7f7;
        }

        fieldset {
            border: none;
            padding: 0;
            margin: 0;
        }

        legend {
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        label {
            display: block;
            margin-bottom: 10px;
            font-weight: bold;
        }

        input[type="text"] {
            width: 100%;
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
            box-sizing: border-box;
        }

    </style>
</head>
<body>
<div th:replace="sidebar.html :: sidebar"></div>
<div id="content-container">
    <table id="configTable">
        <thead>
        <tr>
            <th>文件名</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody>
        <!-- 文件名和查看按钮将在JavaScript中动态生成 -->
        </tbody>
    </table>

    <form id="pdfConfigForm">
        <fieldset>
            <legend>Pdf 配置信息</legend>
            <div id="pdfFormFields"></div>
        </fieldset>
        <button type="submit">保存</button>
    </form>

    <div class="popup-overlay" id="popupOverlay">
        <div class="popup-content" id="popupContent">
            <!-- 编辑框内容将在JavaScript中动态生成 -->
            <div id="configEditor" class="config-editor"></div>
            <div class="popup-buttons">
                <button id="saveButton">保存</button>
                <button id="cancelButton" onclick="closeConfigEditor()">取消</button>
            </div>
        </div>
    </div>
</div>

<script>
    var pdfConfigData = {}
    // JavaScript代码
    function getAllConfigs() {
        var configTable = document.getElementById("configTable");
        var popupOverlay = document.getElementById("popupOverlay");

        // 发起AJAX请求获取所有配置文件名
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/configuration/getAllConfig");
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                if (response.code === 200) {
                    var configNames = response.data;

                    // 动态生成表格行
                    for (var i = 0; i < configNames.length; i++) {
                        var configName = configNames[i];

                        // 创建表格行
                        var row = document.createElement("tr");

                        // 文件名列
                        var nameCell = document.createElement("td");
                        nameCell.textContent = configName;
                        row.appendChild(nameCell);

                        // 查看按钮列
                        var viewButtonCell = document.createElement("td");
                        var viewButton = document.createElement("button");
                        viewButton.textContent = "查看";
                        viewButton.addEventListener("click", function() {
                            showConfig(configName);
                        });
                        viewButtonCell.appendChild(viewButton);
                        row.appendChild(viewButtonCell);

                        // 将行添加到表格中
                        configTable.appendChild(row);
                    }
                }
            }
        };
        xhr.send();
    }

    // 显示悬浮的编辑框
    function showConfig(configName) {
        // 发起AJAX请求获取配置文件信息
        var xhr = new XMLHttpRequest();
        xhr.open("GET", "/configuration/getConfigText?name=" + encodeURIComponent(configName));
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var response = JSON.parse(xhr.responseText);
                if (response.code === 200) {
                    var configData = response.data;

                    // 在编辑框中展示配置文件信息
                    var configEditor = document.getElementById("configEditor");
                    configEditor.textContent = configData;

                    // 使用highlight.js来高亮显示YAML内容
                    hljs.highlightBlock(configEditor);

                    // 显示弹出框
                    var popupOverlay = document.getElementById("popupOverlay");
                    popupOverlay.style.display = "block";
                }
            }
        };
        xhr.send();
        // 创建文本区域元素
        var textarea = document.createElement("textarea");
        textarea.className = "config-editor";
        textarea.value = configData;

        // 将文本区域添加到编辑框中
        var configEditor = document.getElementById("configEditor");
        configEditor.innerText = "";
        configEditor.appendChild(textarea);
    }


    // 关闭悬浮的编辑框
    function closeConfigEditor() {
        // 清空编辑框内容
        var configEditor = document.getElementById("configEditor");
        configEditor.textContent = "";

        // 隐藏弹出框
        var popupOverlay = document.getElementById("popupOverlay");
        popupOverlay.style.display = "none";
    }

    function getPdfConfig() {
        var url = 'http://localhost:9001/configuration/pdfConfig'
        var xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4 && xhr.status === 200) {
                var data = JSON.parse(xhr.responseText);
                pdfConfigData = data.data
                displayPdfConfig(data.data);
            }
        };
        xhr.send();
    }

    // Function to display data in a table
    function displayPdfConfig(data) {
        var formFields = document.querySelector('#pdfFormFields');

        for (var key in data) {
            var value = data[key];
            var label = document.createElement('label');
            var input = document.createElement('input');

            label.textContent = key;
            input.value = value;
            input.name = key;

            formFields.appendChild(label);
            formFields.appendChild(input);
            formFields.appendChild(document.createElement('br'));
        }
    }

    function updateConfig() {
        var form = document.querySelector('#pdfConfigForm');
        var formData = new FormData(form);

        for (var [key, value] of formData.entries()) {
            pdfConfigData[key] = value;
        }
    }

    // Function to save updated configuration
    function savePdfConfig(event) {
        event.preventDefault(); // 阻止表单提交的默认行为

        updateConfig();
        console.log(pdfConfigData)

        var xhr = new XMLHttpRequest();
        xhr.open('PUT', 'http://localhost:9001/configuration/pdfConfig', true);
        xhr.setRequestHeader('Content-Type', 'application/json');

        xhr.onreadystatechange = function() {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    console.log('Configuration updated successfully');
                } else {
                    console.error('Failed to update configuration');
                }
            }
        };

        xhr.send(JSON.stringify(pdfConfigData));
    }

    var form = document.querySelector('#pdfConfigForm');
    form.addEventListener('submit', savePdfConfig);
    getAllConfigs();
    getPdfConfig();
</script>
</body>
</html>